// customEditor
<template lang="html">
  <div>
    <editor
      v-if="!showCode"
      :height="height"
      @change="changeValue"
      :value="value"
    />
    <monaco v-else :height="height" @change="changeValue" :value="value" />
    <div class="bottom">
      <el-link :underline="false" @click="showCode = !showCode">
        <i class="el-icon-view el-icon--right"></i>
        {{ showCode ? '可视化界面' : '查看源码' }}
      </el-link>
    </div>
  </div>
</template>

<script>
  import monaco from './monaco'
  import editor from './editor'

  export default {
    components: {
      monaco,
      editor
    },
    data() {
      return {
        showCode: false // 是否查看源码
      }
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      height: {
        type: Number,
        default: 0
      }
    },
    mounted() {},
    methods: {
      // wangEditor/Monaco Editor 改变的值做保存
      changeValue(value) {
        this.$emit('input', value)
      },


    }
  }
</script>
<style scoped>
  .bottom {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }
</style>
